<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
    <style>
        .container {
            width: 30%;
            min-height: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="layui-form-item">

        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input id="username" type="text" name="username" required lay-verify="required" placeholder="输入用户名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input id="email" type="email" name="email" required lay-verify="required" placeholder="输入邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input id="password" type="password" name="password" required lay-verify="required"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">悄悄地输入密码</div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button class="layui-btn layui-btn-primary"><a href="/toLogin">已有账号,去登录</a></button>
                </div>
            </div>
        </form>

        <script>
            //Demo
            layui.use('form', function () {
                var form = layui.form;
                let email = document.getElementById('email');
                let username = document.getElementById('username');
                let password = document.getElementById('password');

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    // layer.msg(JSON.stringify(data.field));

                    //向后端发送请求
                    axios.post(`/register`, data.field).then(function (data) {
                        console.log(data)
                        if (data.data === 'ok') {
                            layer.msg('注册成功,即将跳转到登录!!!')
                            setTimeout(function () {
                                window.location.href = '/toLogin'
                            },1300)
                            return
                        }
                        layer.msg('注册失败')
                    })

                    return false;
                });
            });
        </script>
    </div>
</div>
<script>

</script>
</body>
</html>